import { zhooks } from 'ym-design'
import dayjs from 'dayjs';
const { useRequest, clearCache } = zhooks
function getArticle(): Promise<{ data: string; time: number }> {
  console.log('--getArticle--cacheKey--');
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: Math.random() + 'Article，我和我的祖国',
        time: new Date().getTime(),
      });
    }, 1000);
  });
}

const CACHEKEY = 'get-article-001';

function HookUseRequestCacheBasic() {
  const { data, loading, run } = useRequest(getArticle, {
    cacheKey: CACHEKEY,
    cacheTime: 10000,
    staleTime: 5000,
    onSuccess(data) {
      console.log('--onSuccess--data--', data);
    },
  });

  return (
    <div>
      <div>
        <p>data:{data && (data as any).data}</p>
        <p>data.time={data && dayjs(data?.time).get('second')}</p>
        <button disabled={loading} onClick={run}>
          run
        </button>
        <button onClick={() => clearCache(CACHEKEY)}>清除缓存</button>
      </div>
    </div>
  );
}

export default HookUseRequestCacheBasic;